const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 人物属性
const path = require('path');

module.exports = {
  entry: './src/main.js',//webpack入口
  output: { //出口
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' // 以此为基准生成打包后html文件
    }),
    new MiniCssExtractPlugin(), //提取css为独立文件的插件
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ],
  module: {
    rules: [ // loader的规则
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: [MiniCssExtractPlugin.loader, "css-loader"]
        // 从右到做的，所以不能颠倒顺序
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },
      {// 图片文件的配置（仅用于webpack5版本）
        test: /\.(gif|png|jpg|jpeg)$/,
        type: 'asset'//匹配上面的资源后，webpack会把它们当做静态的资源处理打包
        // 如果你设置的是asset模式
        // 以8kb大小区分图片文件
        // 小于8kb的，把图片转base64，打包进js
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource',//所有的字体图标文件,都输出到dist文件下
        generator: {//生成文件的名字 -定义规则
          filename: 'fonts/[name].[hash:6][ext]'//[ext]会替换成.eot/.woff
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,//不匹配这些文件
        use: {
          loader: 'babel-loader',//使用loader处理js文件
          options: {//加载器选项
            presets: ['@babel/preset-env']//预设:@babel/present-env 降级规则-按照这里的规则降级我们的js语法
          }
        }
      },
    ],
  },
  devServer: {
    port: 1024,
  },
};
